<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css?v=1">
    <style>
        .circle50per{
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .outside{
            width: 500px;
            height: 500px;
            border: 1px solid #0f0;
        }
        .inside{
            width: 200px;
            height: 200px;
            background: #00f;
        }
        .relative{
            border: 1px solid red;
            width: 500px;
            height: 500px;
        }
        .centerMiddleAbs{
            width: 200px;
            height: 200px;
            background: #00f;
            line-height: 200px;
        }
        .moveLeft{
            width: 100px;
            height: 100px;
            background: #f0c0c0;
        }
        .rotate{
            width: 500px;
            height: 500px;
            background: blue;
        }
    </style>
</head>
<body>
<h3>边框圆角50%</h3>
<div class="circle50per"></div>
<h3>flex布局垂直居中</h3>
<div class="outside centerMiddleFlex">
    <div class="inside">里面的部分</div>
</div>
<h3>相对绝对定位</h3>
<div class="relative">
    <div class="centerMiddleAbs">里面的内容</div>
</div>
<div class="moveLeft"></div>
<div class="rotate">heloo</div>
<h3>路由测试</h3>
<ul>
    <a href="#/">首页</a>
    <a href="#/todo">todo</a>
    <a href="#/start">开始</a>
</ul>
<h3>轮播图</h3>
<div>
    <div class="bannerBg">
        <!-- 图片区域 -->
        <ul class="banner clearfix">
            <li>
                <a href="javascript:;"><img src="images/1920/1.jpg" /></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/1920/2.jpg" /></a>
            </li>
            <li>
                <a href="javascript:;"><img src="images/1920/3.jpg" /></a>
            </li>
        </ul>
        <!-- 按钮区域 -->
        <div class="leftBtn"></div>
        <div class="rightBtn"></div>
        <!-- 小点区域 -->
        <ul class="dianBg">
            <li class="current"></li>
            <li></li>
            <li style="margin-right:0;"></li>
        </ul>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./js/jquery.min.js" type="text/javascript"><\/script>')</script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src='./js/horseFox.js'></script>
<script>
    hf.Banner();
function home() {
    console.log('这是home');
}
function todo() {
    alert('这是todo');
}
function start() {
    alert('这是start');
}
hf.HashRoute();
hf.params.hash.route('/', home);
hf.params.hash.route('/todo', todo);
hf.params.hash.route('/start', start);

</script>
</body>
</html>